<template>
    <div class="chose-card-container">
        <ul>
            <li @click="jump_card(item.bank_name,item.bank_cardno)" v-for="item in items">
                <div class="li-item">
                    <div class="li-item-con">
                        <div class="lit-item1">{{item.bank_name}}</div>
                        <div class="lit-item2">{{item.bank_cardno}}</div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="add-card" @click="add_card" ><span>+</span><span>添加信用卡</span></div>
        <loading :loadStatus="load_status" :loading="loading" :loadingTxt="loading_txt" :hasComplete="complete_status" :completeTxt="completeTxt"></loading>
    </div>    
</template>
<script>
import * as regular from '../utils/regular'
import loading from 'base/loading/loading'
export default {
    data(){
        return{
            items:[],
            load_status:false,//控制显示加载
            loading:true,//加载图片
            loading_txt:'支付中，请稍等',//加载文字
            complete_status:true,//用来显示完成状态
            completeTxt:'支付完成'//显示完成状态文字
        }
    },
    created(){
        this._load()
        //测试
    },
    methods:{
        _load(){
          let that = this
          that.$api.ajax([that._get_card()])  
        },
        //获取绑定卡列表
        _get_card(){
            let that = this
            let params = {
                openid:that.$storage.get("openid")
            }
            return new Promise(function (resolve,reject) {
                that.$api.getCardList(params).then(res => {
                    if(res.RCD==0){
                        that.items = res.DATA
                        console.log('-------打印卡列表信息-------')
                        console.log(res)
                    }else{
                        that.$totast(res.ErrMsg)
                    }
                    resolve()  
                }).catch(err=>{
                    resolve() 
                })
            })
        },
        //跳转信用卡
        jump_card(name,card_num){
            let that = this
            that.$api.ajax([that.pre_create_quickpay(card_num)])  
        },
        //添加信用卡
        add_card(){
            let that = this
            that.$router.push({
                path: "/AddCard"
            })
        },
        //快捷支付
        pre_create_quickpay(card){
            let that = this
            that.load_status = true
             return new Promise(function (resolve,reject) {
                setTimeout(() => {
                    let params = {
                        bankcardNum:regular.removeAllSpace(card),
                        openid:that.$storage.get("openid"),
                        amount:that.$storage.get("amount"),
                        callback:"http://pay.1207soft.com/silver/#/Complete"
                    }
                    that.$api.preCreateQuickpay(params).then(res => {
                        if(res.RCD==0){
                            if(res.url_type=="CallBack"){
                                that.loading = false
                                setTimeout(() => {
                                    that.$storage.set("tradeNo",res.tradeNo)
                                    location.href = ''+res.url
                                }, 1500)
                            }else{
                                that.$storage.set("tradeNo",res.tradeNo)
                                location.href = ''+res.url
                            }
                        }else{
                            that.$totast(res.ErrMsg)
                            that.load_status = false
                        }
                        resolve()  
                    }).catch(err=>{
                        console.log(err)
                        that.load_status = false
                        resolve() 
                    })   
                }, 200)
            })
        },
    },
    components:{
      loading
    }
}
</script>
<style lang="less" scoped>
.chose-card-container{
    width: 100%;
    height: 100vh;
    font-size: 4.2vw;
    font-size: "微软雅黑";
    background-color: #f5f5f5;
    ul{
        padding-bottom: 5%;
    }
    ul li{
        width: 100%;
        background-color: #fff;
        .li-item{
            margin-left: 4%;
            border-bottom: 1px solid #f5f5f5;
            .li-item-con{
                padding-left: 4%;
                .lit-item1{
                    color:#fe6d0a;
                    padding-top: 4%;
                    font-size: 4.7vw;
                }
                .lit-item2{
                    padding: 1.5% 0 3.5% 0;
                }
            }   
        }
    }
    .add-card{
        width: 94%;
        margin: 0 auto;
        border: 1px dashed #D0D0D0;
        border-radius: 2vw;
        padding: 3.8% 0 3.7% 0;
        color: #fe6d0a;
        text-align: center;
        span{
            &:last-child{
                margin-left: 1vw;
            }
        }
    }
}
</style>
